<template>
<div>
  <el-dialog
      title="耗材对比"
      :visible.sync="centerDialogVisible"
      width="70%"
      :close-on-click-modal="false"
      :modal-append-to-body="true"
      :append-to-body="true"
      :before-close="close"
      class="consumable dialog"
      
      >
      <div style="max-width:1000px;margin:auto;">
        <div class="con-card" v-for="i in list" :key="i.id">
          <h4>维修详细记录</h4>
          <div class="con-des">
            <span><label>报修单号:</label>{{i.reportForRepairOddNumber}}</span>
            <span><label>负责人:</label>{{i.responsibleUserName}}</span>
            <span>
              <label>处理结果:</label>
              <font v-show="i.processingResults==1">未查明原因</font>
              <font v-show="i.processingResults==2">需返厂</font>
              <font v-show="i.processingResults==3">申请物料</font>
              <font v-show="i.processingResults==4">需转交</font>
              <font v-show="i.processingResults==5">已解决</font>
            </span>
            <span><label>处理时间:</label>{{i.processingDatetime}}</span>
            <span><label>处理内容:</label>{{i.processingContent}}</span>
          </div>
          <h4>维修费用</h4>
          <el-table v-loading="loading" :data="i.deviceReportForRepairCosts" border show-summary>
            <el-table-column label="设备名称" align="center" prop="deviceName"/>
            <el-table-column label="使用人" align="center" prop="userName"/>
            <el-table-column label="数量" align="center" prop="number"/>
            <el-table-column label="单价" align="center" prop="unitPrice"/>
            <el-table-column label="小计" align="center" prop="subtotal"/>
          </el-table>
        </div>
  

      </div>
  </el-dialog>
</div>
</template>

<script>
    import {maintenRecord} from '@/api/repair/index'
    export default {
      name: "consumable.vue",
      props:['pid'],
      data(){
          return{
            loading:false,
            list:[],
            twoLoading:false,
            twoList:[],
            detailForm:'',
            centerDialogVisible:true
          }
      },
      created() {
          this.getList()
      },
      methods:{
        getList(){
          this.loading=true
          maintenRecord(this.pid).then((res)=>{
            this.loading=false
            this.list=res.data
          })
        },
        close(){
          this.$emit('subSetChane')
        },
        returnUp(){
          // this.$router.go(-1);
          // this.$router.push({path:'/conserve/conserveTaskDetail',query:{data:this.detailForm}});
        }
      }
    }
</script>

<style scoped lang="scss">
    .dialog >>> .el-dialog__body{
      height: 85vh;
      overflow: scroll;
    }
  .consumable{
    // width:900px;
    // text-align: center;
    // margin-left:20px;
    
    .el-table{
      margin-bottom:20px;
    }
    h4{
      color: #05A380;
    }
    .con-card{
      padding: 15px 25px;
      // background:	LightYellow;
      // border: 2px solid LightCyan;
      box-shadow: 5px 5px 10px 7px #D3D3D3;
      border-radius: 10px;
      margin-bottom: 20px;
    }
    .con-des{
      span{
        display: inline-block;
        width: 300px;
        margin: 10px 0;
      }
      label{
        display: inline-block;
        width: 100px;
        text-align: right;
        padding-right: 15px;
      }
    }
  }

</style>
